<template>
  <div>
    <h3> 请支付：{{courrentPrice}} RMB</h3>
 
   
    <ul>
      <li v-for="(item, index) in payment" :key="index">
        <input
          id="payments"
          type="button"
          :value="item.msg"
          @click="paymentMethod(item.id)"
        />
      </li>

      <img v-if="paymentId == 1" src="../../public/img/001.jpg" alt="" />
      <img v-else-if="paymentId == 2" src="../../public/img/002.jpg" alt="" />
      <img v-else-if="paymentId == 3" src="../../public/img/003.jpg" alt="" />
      <h3 v-else>请选择有效的支付方式</h3>
    </ul>
  </div>
</template>

<script>
import Shop from "./Shop.vue";

export default {
  data() {
    return {
      courrentPrice:0,
      paymentId: 0,
      payment: [
        {
          id: 1,
          msg: "微信支付",
        },
        {
          id: 2,
          msg: "支付宝支付",
        },
        {
          id: 3,
          msg: "QQ支付",
        },
      ],
    };
  },
  methods: {
    //根据id显示对应的图片
    paymentMethod(id) {
      this.paymentId = id;
    },
  },
  components: {
    Shop,
  },
  created(){
    this.courrentPrice=this.$route.query.moneys
  }
   
};
</script>

<style>
#payments {
  margin-top: 30px;
  font-size: 25px;
  color: royalblue;
}
</style>